<template>
  <el-card>
    <div id="root">
      <div id="left"><img :src="employee.avatarUrl" /></div>
      <div id="mid">
        <div style="font-size: 25px; font-weight: bold">
          {{ employee.name }}
        </div>
        <div style=" font-size: 13px; color:#88888">
          <div class="el-icon-user-solid">20</div>
          <div class="el-icon-s-cooperation" style="margin-left: 30px">
            {{ employee.status }}
          </div>
          <div class="el-icon-map-location" style="margin-left: 30px">
            {{ employee.address }}
          </div>
        </div>
        <div style=" font-size: 13px; color:#88888">
          <div class="el-icon-mobile-phone">{{ employee.phone }}</div>
          <div class="el-icon-message" style="margin-left: 30px">
            {{ employee.email }}
          </div>
        </div>
      </div>
      <div>
        <div><span class="edit-btn" @click="() => {$emit('toEdit')}">编辑</span></div>
      </div>
    </div>
    <div style="margin-top: 30px">
      <h3>优势亮点</h3>
      <span style="color: #b0c4de">编辑优势亮点，展示我的独特态度</span>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ["employee"],
  emits: ['toEdit']
};
</script>

<style scoped>
#root {
  display: flex;
  justify-content: space-between;
  /* flex: 0 0 0 ; */
}
#mid {
  flex-grow: 1;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#left {
  height: 100px;
}
#left > img {
  height: 100%;
  border-radius: 50px;
}
.edit-btn {
  cursor: pointer;
  color: #ff6400;
  user-select: none;
}
</style>